<template>
	<view class="content">
		<view class="nav">
			<swiper class="swiper" indicator-dots autoplay :interval="3000" :duration="500"
			indicator-color="#DCDCDC"
			indicator-active-color="#FFFFFF"
			>
			        <swiper-item v-for="(a,b) in hotList" :key="b" @click="onWebView(a)">
						<image :src="a.img"></image>
			        </swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				//路由导航列表
				hotList:[
					{
						img:'/static/home/swiper1.png',
						url:'https://app15.hzgsredcross.org.cn/jh/help/help.html?returnUrl=https://hzgsapp3.hzgsredcross.org.cn/Home.aspx',//要跳转的url地址
					},
					{
						img:'/static/home/swiper1.png',
						url:'https://app15.hzgsredcross.org.cn/jh/help/help.html?returnUrl=https://hzgsapp3.hzgsredcross.org.cn/Home.aspx',//要跳转的url地址
					},
					{
						img:'/static/home/swiper1.png',
						url:'https://app15.hzgsredcross.org.cn/jh/help/help.html?returnUrl=https://hzgsapp3.hzgsredcross.org.cn/Home.aspx',//要跳转的url地址
					}
				]
			}
		},
		methods: {
			//跳转列表对应页面
			onWebView({url}){
			  // #ifdef  H5
			  if(url){
			    window.location.href=url;
			  }
			  // #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin: 7rpx 20rpx  10rpx 20rpx;
		.nav{
			height: 240rpx;
			background: #F1F8FF;
			.swiper{
				height: 100%;
				border-radius: 10rpx;
				overflow: hidden;
				transform: translateY(0);
				.uni-swiper-dot{
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
				}
			}
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
